<template>
  <div class="container" @click="handleClose">
    <div class="wrapper">
      <swiper :options="swiperOption">
      <swiper-slide class="swiper-img" v-for="(item,index) in gallaryImgs" :key="index">
        <img :src="item" alt="">
      </swiper-slide>

      <!-- 分页 -->
      <div class="swiper-pagination"  slot="pagination"></div>

      <!--横向滚动条禁用-->
      <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
      <!--左右箭头禁用-->
      <!--<div class="swiper-button-prev" slot="button-prev"></div>-->
      <!--<div class="swiper-button-next" slot="button-next"></div>-->
    </swiper>
    </div>
  </div>
</template>

<script>
    export default {
        props:{
          gallaryImgs: Array
        },
        name: "CommonGallary",
        data(){
          return{
            swiperOption:{
              pagination: '.swiper-pagination',
              paginationType: 'fraction',
              // 异步数据必须添加
              observeParents:true,
              observer:true
            }
          }
        },
        methods:{
          handleClose(){
            this.$emit("Close")
          }
        }
    }
</script>

<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-fraction
    bottom: -1rem
    left: 0
    width: 100%
    color:#fff
  .container
    display flex
    /* 生成绝对定位的元素，相对于浏览器窗口进行定位,而不是父级。*/
    position fixed
    flex-direction: column
    justify-content center
    left 0
    right 0
    top 0
    bottom 0
    background rgba(0,0,0,1)
    z-index 99
  .swiper-img
   height 0
   padding-bottom 67%
  .swiper-img img
   width 100%
  .swiper-container
   overflow visible
</style>
